<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'

import { ref, unref, reactive } from 'vue'

import { ElTabs, ElTabPane, ElProgress, TabsPaneContext, TableColumnCtx } from 'element-plus'

import teacher from './components/teacherExams.vue'
import user from './components/userExams.vue'
import examsTable from './components/examsTable.vue'

const activeName = ref('zero')
</script>

<template>
  <ContentWrap>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="按课程统计" name="zero">
        <examsTable />
      </el-tab-pane>
      <el-tab-pane label="按老师统计" name="first">
        <teacher />
      </el-tab-pane>
      <el-tab-pane label="按学员统计" name="second">
        <user />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
</template>
<style>
.clome {
  display: flex;
  flex-direction: column;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 24px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 10px;
}
</style>
